<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="example1">
			<div>
				<!-- 单行文本 -->
				<input v-model="message" placeholder="edit me" />
				<p>Message is :{{message}}</p>
			</div>
			
			<div>
				<!--多行文本 -->
				<textarea v-model="msg2" placeholder="add multiple lines">
					
				</textarea>
				<span>Multiple message is:</span>
				<p style="white-space: pre-line;">{{msg2}}</p>
			</div>
			
			
			<div>
				<!-- 单选框 -->
				<input type="checkbox" id="checkbox1" v-model="checked" />
				<label for="checked">{{checked}}</label>
			</div>
			
			
			<div>
				<!-- 多个复选框 绑定到同一个数组 -->
				<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
				<label for="jack">jack</label>
				
				<input type="checkbox" id="john" value="John" v-model="checkedNames" />
				<label for="john">john</label>
				
				<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
				<label for="mike">mike</label>
				<br>
				<span>checked names:{{checkedNames}}</span>
			</div>
			
			<div>
				<!-- 单选按钮 -->
				<input type="radio" id="one" value="One" v-model="picked" />
				<label for="one">one</label>
				
				<input type="radio" id="two" value="Two" v-model="picked" />
				<label for="two">two</label>
				<br />
				<span>Picked:{{picked}}</span>
			</div>
			
			<div>
				<!-- 选择框 -->
				<select v-model="selected">
					<option disabled value="">请选择</option>
					<option>A</option>
					<option>B</option>
					<option>C</option>
				</select>
				<span>Selected:{{selected}}</span>
			</div>
			
			<div>
				<!-- 选择框 可以多选 -->
				<select v-model="selectedMultiple" multiple style="width: 50px;">
					<option>A</option>
					<option>B</option>
					<option>C</option>
				</select>
				<span>SelectedMultiple:{{selectedMultiple}}</span>
			</div>
			
			<div>
				<!-- v-for 渲染 -->
				<select v-model="selected2">
					<option v-for="e in options" v-bind:value="e.value">{{e.text}}</option>
				</select>
				<span>selected2:{{selected2}}</span>
			</div>
			
			
			<div>
				
				<!-- 在“change”时而非“input”时更新 -->
				<input v-model.lazy="msg">
			</div>
			
		</div>	
		<script type="text/javascript">
			let app=new Vue({
				el:'#example1',
				data:{
					message:'',
					msg2:'',
					msg:'',
					checked:false,
					checkedNames:[],
					picked:'',
					selected:'',
					selectedMultiple:[],
					selected2:'A',
					options:[
						{ text: 'One', value: 'A' },
						      { text: 'Two', value: 'B' },
						      { text: 'Three', value: 'C' }
					],
					toggle:false,
					pick:'',
				},
				props:['a'],
			})
		</script>	
		<style type="text/css">
			
		</style>
	</body>
</html>
